<template>
    <div style="margin-left: 15%;margin-right: 15%;width: 70%;">
        <el-card>
            <div slot="header" class="post-return-clearfix">
                <span>{{communityPost.content}}</span>
                <el-button style="float: right" type="primary" @click="openPostReturnForm">回复</el-button>
            </div>
            <template v-if="listData.length === 0">
                <el-card shadow="hover">
                    <el-row  style="margin: 20px 0">
                        <el-col :span="2" :offset="12">
                            <span>暂无回帖</span>
                        </el-col>
                    </el-row>
                </el-card>
            </template>
            <div>
                <ul>
                    <li v-for="(item, idx) in listData" style="padding: 10px 2px ">
                        <el-row>
                        <el-col :span="4">
                            <el-card style="height: 200px">
                                <span>{{item.readerName}}</span>
                            </el-card>
                        </el-col>
                        <el-col :span="20">
                            <el-card style="height: 200px">
                                <div>发表于{{item.createTime}}</div>
                                <hr>
                                <span>{{item.content}}</span>

                            </el-card>
                        </el-col>
                        </el-row>
                    </li>
                </ul>
                <el-row  style="margin: 20px 0">
                    <el-col :span="10" :offset="16">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage4"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="filter.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </el-card>

        <el-dialog title="回复" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="回复内容" :label-width="formLabelWidth">
                    <el-input v-model="form.content" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitPostReturn">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import  { getCommunityPostReturns, create } from '../../../module/admin/community/communityPostReturn';

    export default {
        data () {
            return {
                listData: [],
                search:{
                    key: '',
                    value:'',
                },
                loading: true,
                visible2: false,
                filter: {
                    pageNum: 1,
                    pageSize: 10,
                },
                total: 0,
                currentPage4: 1,
                communityPost: {},
                dialogFormVisible: false,
                form: {
                    content: '',
                    communityPostId: '',
                    readerId: '',
                }
            }
        },
        mounted () {
            let communityPost = this.$route.params.communityPost;
            this.communityPost = communityPost;
            this.search.key='communityPostId';
            this.search.value = communityPost.id;
            getCommunityPostReturns(this);
        },
        methods: {
            submitPostReturn() {
                this.form.communityPostId = this.communityPost.id;
                this.form.readerId = this.readerId;
                let _this = this;
                create(this.form).then(function (data) {
                    _this.$message({
                        type: 'success',
                        center: true,
                        message: '回复帖子成功!'
                    });
                    _this.dialogFormVisible = false;
                    _this.form = {};
                    getCommunityPostReturns(_this);
                }).catch(function (error) {
                    _this.$message({
                        type: 'error',
                        center: true,
                        message: '回复帖子失败!'
                    });
                });
            },
            openPostReturnForm() {
                let readerId = sessionStorage.getItem('readerId');
                if (readerId === '' || readerId === null ) {
                    this.$notify({
                        title: '提示',
                        message: '请先登录',
                        type: 'warning'
                    });
                } else {
                    this.readerId = readerId;
                    this.dialogFormVisible = true
                }
            },
            handleSearch(val) {
                this.search.key = val;
                getCommunityPostReturns(this)
            },
            handleSizeChange(val) {
                this.filter.pageSize = val;
                getCommunityPostReturns(this);
            },
            handleCurrentChange(val) {
                this.filter.pageNum = val;
                getCommunityPostReturns(this);
            },
        }
    }
</script>


<style>
    .post-return-clearfix:before,
    .post-return-clearfix:after {
        display: table;
        content: "";
    }
    .post-return-clearfix:after {
        clear: both
    }

</style>
